<html>
    <head>
        <title>传递静态或动态Prop</title>
    </head>
    <body>
        <script>
             // 三、传递静态或动态 Prop
                              // 像这样，你已经知道了可以像这样给 prop 传入一个静态的值：
                                       /*
                                          <blog-post title="My journey with Vue"></blog-post>
                                       */

                               // 你也知道了 prop 可以通过　v-bind 动态的赋值，例如：
                                       /*
                                           动态地赋一个变量的值给 prop
                                           <blog-post 
                                                  v-bind:title="post.title +'by'+ post.author.name">
                                           </blog-post>
                                       */

                                       // 在上述的两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop


                                // 1、传入一个数字

                                          /*
                                              即使数字是静态的，我们仍然要使用"v-bind"来告诉 Vue :"这是一个JavaScript表达式，而不是一个字符串"：

                                              <blog-post v-bind:likes="42"></blog-post>


                                              使用一个变量进行冬天赋值
                                              
                                              <blog-post v-bind:likes="post.likes"></blog-post>
                                          */


                                // 2、传入一个布尔值
                                          /*
                                              包含该 prop 没有值的情况在内，都意味着'true'

                                              <blog-post is-published></blog-post>

                                              即便 'false'是静态的，我们仍然要使用 "v-bind" 来告诉Vue: "这是一个JavaScript表达式，而不是一个字符串"

                                              <blog-post v-bind:is-published="false"></blog-post>

                                              用一个变量进行动态赋值
                                              <blog-post v-bind:is-published="post.isPublished">/blog-post>
                                          */

                                // 3、传入一个数组
                                          /*
                                              即便数组时静态的，我们仍然需要 v-bind 来告诉Vue :"这是一个JavaScript表达式，而不是一个字符串"

                                              <blog-post v-bind:comment-ids="[234,266,273]"></blog-post>


                                              用一个变量进行动态赋值
                                              <blog-post v-bind:commment-ids="post.commentIds"></blog-post>
                                          */

                                // 4、传入一个对象
                                          /*
                                              即便对象是静态的，我们仍然需要 v-bind 来告诉Vue : "这是一个JavaScript表达式，而不是一个字符串"
                                              <blog-post v-bind:author="{
                                                  name:'Veronica',
                                                  company:'Veridian Dynamics'
                                              }"
                                              ></blog-post>

                                              用一个变量进行冬天赋值
                                              <blog-post v-bind:author="post.author"></blog-post>
                                          */


                                // 5、传入一个对象的所有 property
                                          /*
                                             如果你想将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)

                                             例如，对于一个给定的对象 post:
                                                post:{
                                                    id:1,
                                                    title:'My Journey with Vue'
                                                }
                                            
                                              在HTML模板中你可以这样传入：

                                                <blog-post v-bind="post"></blog-post>

                                              这将等价于：
                                                <blog-post 
                                                        v-bind:id="post.id"  
                                                        v-bind:title="post.title">
                                                </blog-post>
                                          */
        </script>
    </body>
</html>